<template>
  <div>
      <section class="menu-block">
        <h2>设置badge文字</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{setBadgeTextCode}}</code>
            </pre>
            <van-cell-group>
                <van-field v-model="badgeTextData" placeholder="请输入若干字符" />
            </van-cell-group>
            <van-button size="large" type="primary" @click="setBadgeTextClick">点击设置badge文字</van-button>
            <p></p>
            <van-button size="large" type="primary" @click="setBadgeClearClick">点击清空badge</van-button>
        </div>
      </section>
      <section class="menu-block">
        <h2>设置badge文字</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{setBadgeNumCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="setBadgeNumClick">点击设置badge数字</van-button>
            <code>num：{{ badgeNumData }},max: 10,maxStr:10+</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>跳转到其他tab</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{setTabIndexCode}}</code>
            </pre>
            <van-cell-group>
                <van-field v-model="tabIndex" type="number" placeholder="数字" />
            </van-cell-group>
            <van-button size="large" type="primary" @click="setTabIndexClick">点击跳转到其他tab</van-button>
        </div>
      </section>
  </div>
</template>

<script>
import {Button, CellGroup, Cell, Field, Notify} from 'vant'
import {tab} from 'MTHybrid'

export default {
    data () {
        return {
            setBadgeTextCode: 'import {tab} from \'fzHybrid\'\n...\n//设置badge文字，当文字为为空字符串时，将显示一个小红点,传 null 时，badge隐藏\n//注意：仅支持tab主页面，从tab页跳转后该功能不生效\ntab.setBadge("text");',
            badgeTextData: '',
            setBadgeNumCode: 'import {tab} from \'fzHybrid\'\n...\n//设置badge数字，当数字为0时，badge隐藏\n//共三个参数，分别为当前数字num，最大显示max，当num > max时，显示的文字maxStr\ntab.setBadge(1,10,"10+");',
            badgeNumData: 0,
            setTabIndexCode: 'import {tab} from \'fzHybrid\'\n...\n//成功跳转，result为null，当index超出最大值或者为null时，result结果: {success:false,msg:"some msgs"}\nvar result = tab.to(tabIndex);',
            tabIndex: 0
        }
    },
    methods: {
        setBadgeTextClick () {
            tab.setBadge(this.badgeTextData)
        },
        setBadgeNumClick () {
            this.badgeNumData = this.badgeNumData + 1
            tab.setBadgeNum(this.badgeNumData, 10, '10+')
        },
        setBadgeClearClick () {
            tab.setBadge(null)
        },
        setTabIndexClick () {
            var index = parseInt(this.tabIndex)
            var result = tab.to(index)
            if (result != null && !result.success) {
                Notify({
                    message: '调用失败:' + result.msg,
                    duration: 3000,
                    background: '#ee0000'
                })
            }
        }
    },
    components: {
        [Button.name]: Button,
        [CellGroup.name]: CellGroup,
        [Cell.name]: Cell,
        [Field.name]: Field,
        [Notify.name]: Notify
    }
}
</script>

<style>
    @import '../../../static/css/index.css';
    .menu-block {
        padding: 0 0.2rem
    }
    h2 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0;
        /* font-weight: 200; */
        font-size: 18px;
        color: rgba(69,90,100,.6);
        padding: 20px 15px 15px;
    }
</style>
